<template>
	<div class="role" v-if="dialogFormVisible">
		<el-dialog :title="title" :visible="dialogFormVisible" width="1000px" :close-on-click-modal="false" :before-close="handleClose">
			<div class="tab">
				<el-form ref="form" :rules="rules" :model="form" label-width="98px">
					<el-row>
						<el-col :span="12">
							<el-form-item label="创建者">
								<el-input v-model="form1.creator_show" placeholder="请输入硬件版本" :disabled="true"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="责任人" >
								<el-input v-model="form1.own" placeholder="请输入样机名称" :disabled="true"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="借用人" >
								<el-input v-model="form1.recevie" placeholder="请输入样机名称" :disabled="true"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="接收时间">
								<el-input v-model="form1.prototype_receive_time" placeholder="请输入接收时间" :disabled="true"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="归还时间">
								<el-input v-model="form1.back_time" placeholder="请输入硬件版本" :disabled="true"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="状态">
								<el-input v-model="form.status_show" placeholder="请输入硬件版本" :disabled="true"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="样机DID" prop="did">
								<el-input v-model="form.did" placeholder="请输入样机DID" :disabled="num == 3"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="样机名称" prop="name">
								<el-input v-model="form.name" placeholder="请输入样机名称" :disabled="num == 3"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="样机model" prop="model">
								<el-input v-model="form.model" placeholder="请输入样机model" :disabled="num == 3"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="硬件版本" prop="hardware_version">
								<el-input v-model="form.hardware_version" placeholder="请输入硬件版本" :disabled="num == 3"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="位置" prop="localtion">
								<el-select v-model="form.localtion" placeholder="请选择位置" style="width:100%;" :disabled="num == 3">
									<el-option
										v-for="item in localtionOptions"
										:key="item.index"
										:label="item.name"
										:value="item.name">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="客户">
								<el-select v-model="form.manufactor" placeholder="请选择客户" style="width:100%;" :disabled="num == 3">
									<el-option
										v-for="(item,index) in customerOptions"
										:key="index"
										:label="item.name"
										:value="item.id">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-form-item label="附件文档" v-if="num == 2">
						<el-upload
							class="upload-demo"
							action="string"
							:headers="headers"
							:http-request="uploadFile"
							:on-remove="deleteFile"
							:before-upload="beforeUpload">
							<el-button size="small" type="primary">附件上传</el-button>
						</el-upload>
						<div v-for="(item,index) in form.guidance_doc" :key="index">
							<span @click="doc(item['id'])">文件名：<a :href="item['full_path']" >{{item['file_name']}}</a></span>
							<span style="margin: 0 20px;">下载次数：{{item['download_count']}}</span>
							<span><el-button type="primary" size="small" @click="removeFlie(item['id'])">删除</el-button></span>
						</div>
					</el-form-item>
					<el-form-item v-if="num == 3" label="附件文档">
						<div v-for="(item,index) in form.guidance_doc" :key="index">
							<span @click="doc(item['id'])">文件名：<a :href="item['full_path']" >{{item['file_name']}}</a></span>
							<span style="margin: 0 20px;">下载次数：{{item['download_count']}}</span>
						</div>
					</el-form-item>
				</el-form>
			</div>
			<div v-if="initTableList.length>0">
				<div style="margin: 5px;border-top: 1px solid #ccc;padding-top: 10px;">
					寄件记录
				</div>

				<div>
					<el-table
						class="marT"
						:data="initTableList"
						:border="true"
						:header-cell-style="{background:'#eef1f6'}"
						lazy
						row-key="id">
						<el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
						<el-table-column align="center" property="tracking_number" label="快递单号" width="300"></el-table-column>
						<el-table-column align="center" property="back_time" label="寄回时间">
							<template slot-scope="scope">
								<span >{{getJtime(scope.row.back_time)}}</span>
							</template>
						</el-table-column>
						<el-table-column align="center" property="remark" label="备注"></el-table-column>
						<el-table-column align="center" property="creator_show" label="操作人">
							<template slot-scope="scope">
								<span>{{scope.row.creator_show.name}}</span><br>
								<span style="font-size: 10px;">{{getTime(scope.row.create_time)}}</span>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="handleClose">取 消</el-button>
				<el-button type="primary" @click="add('form')" v-if="num != 3">提 交</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { getHeader } from '@/app.config'
import {doc,prototypeId,docDelete,manufactorList,localtion} from '@/api/user'
import axios from "axios";
import moment from "moment";
export default {
	name: 'addForm',
	data(){
		return {
			headers:{'Content-Type':'multipart/form-data'},
			dialogFormVisible:false,
			form:{
				name:''
			},
			form1:{},
			id:'',
			rules:{
				did: [
					{max: 50, message: '样机编号不能超过50个字符', trigger: 'blur'},
					{ required: true, message: '请输入样机编号', trigger: 'blur' }
				],
				name: [
					{max: 36, message: '样机名称不能超过36个字符', trigger: 'blur'},
					{ required: true, message: '请输入样机名称', trigger: 'blur' }
				],
				model:[
					{max: 50, message: '样机model不能超过50个字符', trigger: 'blur'},
					{ required: true, message: '请输入样机model', trigger: 'blur' }
				],
				hardware_version:[
					{max: 20, message: '硬件版本不能超过20个字符', trigger: 'blur'},
					{ required: true, message: '请输入硬件版本', trigger: 'blur' }
				],
				prototype_receive_time:{required: true,message: '请选择接收时间',trigger: 'change'},
				localtion:{required: true,message: '请选择位置',trigger: 'change'}
			},
			options:[],
			num:0,
			title:'新增',
			fileList:[],
			arr:[],
			customerOptions:[],
			initTableList:[],
			localtionOptions:[]
		}
	},
	created() {

	},
	methods:{
		getJtime(data){
			let time = moment(data).format('YYYY-MM-DD HH:mm:ss')
			return time
		},
		deleteFile(file, fileList) {
			let fileArr = this.form.guidance_doc
			console.log(file,this.form.guidance_doc,33333)
			this.$message.success("成功移除!")
			this.form.guidance_doc.forEach(item => {
				var arr = item.split('/')
				if(file.name == arr[arr.length-1] ){
					console.log(arr[arr.length-1])
				}
			})
			console.log(fileArr,44444444);
		},
		beforeUpload(file){
			var type = file.name
			type = type.split('.')[1]
		},
		//上传附件
		uploadFile(file) {
			let url= `${process.env.VUE_APP_KANBAN_HOST}/api/v1/file`
			let fd = new FormData();
			fd.append('file',file.file);
			axios({
				url:url,
				data: fd,
				method:'post',
			}).then(res => {
				if(res.data.code === 200) {
					this.$message.success("上传成功!")
					this.fileList.push(res.data.data.key)
				}
			})
		},
		doc(data){
			doc(data).then(response => {
			}).then(response => {
				prototypeId(this.id).then(response => {
					this.form = Object.assign({},response.data)
				})
			})
		},
		removeFlie(data){
			console.log(data,1212121)
			this.arr.forEach((item,index) => {
				if(item['id'] == data){
					if(this.arr.length > 0){
						this.arr.splice(index,1)
					}
					if(this.arr.length == 1){
						if(index == 0){
							this.arr = []
						}
					}
				}
			})
			console.log(this.arr,34343434)
			docDelete(data).then(response => {
				if(response.status == 'success'){
					this.$message.success('删除成功！')
					prototypeId(this.id).then(response => {
						this.form = Object.assign({},response.data)
					})
				}

			})
		},
		handleClose(){
			this.dialogFormVisible = false
			this.form = {}
			this.$parent.initTable()
			this.localtionOptions = []
			this.customerOptions=[]
			this.initTableList = []
		},
		add(form){
			this.$refs[form].validate((valid) => {
				if (valid) {
					this.arr.forEach(item => {
						this.fileList.push(item['fileKey'])
					})
					console.log(this.fileList,12121212)
					this.form.guidance_doc = this.fileList
					var source = `${process.env.VUE_APP_KANBAN_HOST}/api/v1/prototype/${this.id}`;
					this.form.manufactor_id = this.form.manufactor
					var data = this.form
					console.log(data,454545)
					this.$axios.post(source,data,{headers: getHeader()})
						.then((response) => {
							if (response.data.status == 'success') {
								this.dialogFormVisible = false
								this.form = {}
								this.$parent.initTable()
								this.$message.success("登记成功!")
								this.arr = []
								this.fileList = []
							}else {
								this.$message.error('修改失败!')
								this.dialogFormVisible = false
								this.form = {}
								this.arr = []
								this.fileList = []
							}
						}).catch((err) => {
						console.log(err);
					});
				} else {
					return false;
				}
			});

		},
		getTime(data){
			if(data){
				var d = new Date(data);
				var d2 = d.getTime() - 8 * 60 * 60 * 1000
				d = new Date(d2)
				var  resDate = d.getFullYear() + '-' +
					((d.getMonth() + 1)<10?'0'+(d.getMonth() + 1):(d.getMonth() + 1)) + '-' +
					(d.getDate()<10?'0'+d.getDate():d.getDate())+ ' '+
					(d.getHours()<10?'0'+d.getHours():d.getHours())+':'+
					(d.getMinutes()<10?'0'+d.getMinutes():d.getMinutes())+':'+
					(d.getSeconds()<10?'0'+d.getSeconds():d.getSeconds());
				return resDate
			}else {
				return '暂无'
			}

		},
		initData(num,data){
			this.customerOptions = []
			this.localtionOptions = []
			console.log(data,3434343)
			this.num = num
			this.id = data._id

			prototypeId(this.id).then(res => {
				this.form = Object.assign({},res.data)
				this.form.manufactor = data.manufactor['id']
				this.initTableList = res.data.mailing_info
			})

			localtion().then(res => {
				res.data.filter(item => {
					this.localtionOptions.push({name:item})
				})
			})



			manufactorList().then(res => {
				res.data.filter(item => {
					this.customerOptions.push({id:item['id'],name:item['name']})
				})
			})

			if (this.form.own){
				this.form1.own = this.form.own['name']
			}else {
				this.form1.own = '暂无'
			}

			if (this.form.recevie){
				this.form1.recevie = this.form.recevie['name']
			}else {
				this.form1.recevie = '暂无'
			}
			if(this.form.creator_show){
				this.form1.creator_show = this.form.creator_show['name']
			}else {
				this.form1.creator_show = '暂无'
			}

			this.form1.prototype_receive_time = this.getTime(data.prototype_receive_time)
			this.form1.back_time = this.getTime(data.back_time)


			if(num == 2){
				this.title = '编辑'
				data.guidance_doc.forEach(item => {
					this.arr.push({'id':item['id'],'fileKey':item['file_key']})
				})
			}
			if(num == 3){
				this.title = '查看'
			}
		}
	}

}
</script>

<style lang="scss" scoped>
.role{
	//.tab{
	//	width: 450px;
	//	margin: 0 0 0 40px;
	//}
}
</style>
